<template>
  <div class="home">
    <van-nav-bar title="黑马头条" fixed>
      <template #left>
        <div class="logo"></div>
      </template>
      <template #right>
        <van-button type="search" size="small" round icon="search">
          搜索
        </van-button>
      </template>
    </van-nav-bar>
    <van-tabs v-model="active" @click="tabClick">
      <van-tab v-for="item in channels" :key="item.id" :title="item.name">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <van-cell
              v-for="item in list"
              :key="item.art_id"
              :title="item.title"
            >
              <template #label>
                <van-grid :column-num="item.cover.type">
                  <van-grid-item
                    v-for="(img, index) in item.cover.images"
                    :key="index"
                  >
                    <van-image lazy-load fit="cover" :src="img" />
                  </van-grid-item>
                </van-grid>
                <div class="bottom">
                  <span> 发表人: {{ item.aut_name }} </span>
                  <span> 评论数: {{ item.comm_count }} </span>
                  <br />
                  <span> 发表时间: {{ item.pubdate | fromNow }} </span>
                </div>
              </template>
            </van-cell>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getArtcles, getChannel } from "./home.js";
import moment from "moment";
moment.locale("zh-cn");

export default {
  data() {
    return {
      active: 0,
      channels: [],
      loading: false,
      finished: false,
      list: [],
      refreshing: false,
      timestamp: null,
    };
  },
  created() {
    getChannel().then((res) => {
      console.log(res);
      this.channels = res.data.data.channels;
    });
  },
  methods: {
    async onLoad() {
      if (this.refreshing) {
        this.list = [];
        this.refreshing = false;
        this.timestamp = null;
      }
      if (!this.refreshing) {
        this.timestamp = Date.now();
        // console.log(this.timestamp);
      }
      let res = await getArtcles({
        channel_id: this.channels[this.active].id,
        timestamp: this.timestamp,
      });
      // console.log(res);
      this.timestamp = res.data.pre_timestamp;
      this.list.push(...res.data.data.results);
      this.loading = false;
      if (this.list.length > 50) {
        this.finished = true;
      }
    },
    onRefresh() {
      this.finished = false;
      this.loading = true;
      this.onLoad();
    },
    tabClick() {
      this.list = [];
      this.loading = true;
      this.onLoad();
    },
  },
  filters: {
    fromNow(value) {
      return moment(value).fromNow();
    },
  },
};
</script>

<style lang="less" scoped>
::v-deep .van-nav-bar {
  width: 100%;
  background-image: linear-gradient(
    to right,
    pink,
    orange,
    yellow,
    cyan,
    yellow,
    orange,
    pink
  );
  .logo {
    background: url("../../assets/blackhorse.jpg");
    width: 30px;
    height: 50%;
    background-size: cover;
  }
  .van-nav-bar__left {
    left: 25px;
  }
  .van-nav-bar__title {
    color: black;
    margin-left: 20%;
    font-size: 16px;
  }
  .van-button {
    border-color: transparent;
    width: 100px;
  }
}
.van-tabs {
  margin-top: 1.5rem;
  .van-tab__pane {
    margin-top: 14 px;
    font-size: 14px;
  }
}
.bottom {
  span {
    margin-right: 15px;
  }
}
</style>